<script setup lang="ts">
import { ref, defineOptions } from 'vue'
import topTitle from '@/components/TopTitle.vue'
import NoData from '@/components/ReadingView/ChapterEvaluate/NoData.vue'
import { getChapterEvaluate, getStyleName, getChapterInEvaluate } from '@/api/getAxios2.ts'
import { useRoute } from 'vue-router';
const route = useRoute();
//vant组件标签页
const active = ref(0);
const cover = ref('')
const title = ref('')
const author = ref('')
//获取书籍详情
getStyleName(route.query.storyId).then((res:any) => {
    // console.log(res.data.data)
    cover.value = res.data.data.cover
    title.value = res.data.data.name
    author.value = res.data.data.authorName
})
//获取评论详情
const list: any = ref([])
getChapterEvaluate(route.query.storyId, route.query.chapterId).then((res: { data: any; }) => {
    console.log(res.data.data.list)
    list.value = res.data.data.list
})
//获取章节标题
const chapterTitle = ref('')
getChapterInEvaluate(route.query.storyId).then(res => {
    res.data.data.chapterList.list.some((item: any) => {
        if (item.id == route.query.chapterId) {
            chapterTitle.value = item.name
            return true;
        }
    })
})
//转换时间戳
const formatTimestamp = (timestamp: any) => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}`;
}

</script>
<template>
    <div id="chapterBox">
        <topTitle :flag="true" :name="chapterTitle"></topTitle>
        <div class="rankingsBox">
            <div class="rankings">
                <img :src="cover" alt="" class="left">
                <div class="right">
                    <div class="title">{{ title }}</div>
                    <div class="author">{{ author }}·著</div>
                    <img src="@/assets/ReadingView/读者榜.png" alt="" class="reader">
                </div>
            </div>
        </div>
        <van-tabs v-model:active="active" line-width="20px" title-inactive-color="gray" title-active-color="black">
            <van-tab title="最新">
                <NoData v-if="list.length === 0"></NoData>
                <div class="evaluationsBox" v-else>
                    <div class="evaluations" v-for="item in list" :key="item.createDate">
                        <img :src="item.userVo.facePic" alt="" class="tou">
                        <div class="right">
                            <div class="name">{{ item.nickname }}<span class="level">LV.{{ item.level }}</span></div>
                            <div class="content">
                                <div class="comentBody">{{ item.commentBody }}</div>
                                <div class="from">来自 {{ item.chapterName }}</div>
                            </div>
                            <div class="bottom">
                                <div class="time">{{ formatTimestamp(item.createDate) }}</div>
                                <div class="bottomRight">
                                    <div class="say">评论</div>
                                    <div class="like">赞</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="热门">
                <NoData v-if="list.length === 0"></NoData>
                <div class="evaluationsBox" v-else>
                    <div class="evaluations" v-for="item in list" :key="item.createDate">
                        <img :src="item.userVo.facePic" alt="" class="tou">
                        <div class="right">
                            <div class="name">{{ item.nickname }}<span class="level">LV.{{ item.level }}</span></div>
                            <div class="content">
                                <div class="comentBody">{{ item.commentBody }}</div>
                                <div class="from">来自 {{ item.chapterName }}</div>
                            </div>
                            <div class="bottom">
                                <div class="time">{{ formatTimestamp(item.createDate) }}</div>
                                <div class="bottomRight">
                                    <div class="say">评论</div>
                                    <div class="like">赞</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
        <div class="inp">
            <input type="text" placeholder="发表50字评论有机会赢50火星券">
            <input type="button" value="发表">
        </div>
    </div>
</template>

<style scoped lang='less'>
.rankingsBox {
    width: 100%;
    padding: 5vw;
    box-sizing: border-box;
    font-family: '微软雅黑';

    .rankings {
        border-radius: 20px;
        width: 100%;
        display: flex;

        .left {
            width: 35%;
            display: block;
            border-radius: 20px 0 0 20px;
        }

        .right {
            background-color: white;
            width: 65%;
            border-radius: 0 20px 20px 0;
            padding-left: 5vw;
            box-sizing: border-box;

            .title {
                margin-top: 10vw;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 80%;
            }

            .author {
                font-weight: 200;
                margin: 2vw 0;
                font-size: .875rem;
            }

            .reader {
                width: 90%;
                margin-top: 2vw;
                display: block;
            }
        }
    }
}

.inp {
    width: 100%;
    background-color: #eee;
    padding: 1vw 5vw;
    box-sizing: border-box;
    font-family: '微软雅黑';
    display: flex;
    justify-content: space-between;

    input[type='text'] {
        border: none;
        width: 80%;
        border-radius: 20px;
        padding: 2vw;
        box-sizing: border-box;

        &::placeholder {
            font-weight: 200;
            color: gray;
        }
    }

    input[type='button'] {
        border: none;
        border-radius: 20px;
        background-color: #d9646f;
        color: white;
        padding: 0 4vw;
    }
}

.evaluationsBox {
    height: 50vh;
    width: 100%;
    overflow: scroll;
}

.evaluations {
    width: 100%;
    background-color: white;
    padding: 2vw;
    box-sizing: border-box;
    font-family: '微软雅黑';
    display: flex;
    border-bottom: 1px solid #eee;

    .tou {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        display: block;
        object-fit: cover;
        overflow: hidden;
    }

    .right {
        width: 100%;
        margin-left: 5vw;

        .name {
            display: flex;
            align-items: center;

            span {
                font-size: .725rem;
                color: #ddca8e;
                border: 1px solid #ddca8e;
                border-radius: 20px;
                padding: 1px 2px;
                margin-left: 10px;
            }
        }

        .content {
            margin-top: 10vw;
            background-color: #f7f7fa;
            border-radius: 10px;
            padding: 2vw 3vw;
            box-sizing: border-box;

            .from {
                font-weight: 200;
                color: gray;
                margin-top: 4vw;
                font-size: .75rem;
            }
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            font-weight: 200;
            color: gray;
            margin-top: 8vw;

            .time {
                font-size: .75rem;
            }

            .bottomRight {
                display: flex;
            }

            .say {
                position: relative;
                margin-right: 1.875rem;
                font-weight: 200;
                color: gray;

                &::before {
                    content: "";
                    position: absolute;
                    top: 2px;
                    left: -22px;
                    width: 1.2rem;
                    height: 1.2rem;
                    background: url('@/assets/ReadingView/ChapterEvaluate/评论.png') no-repeat;
                    background-size: 1.2rem;
                }
            }

            .like {
                position: relative;
                // margin-right: 1.875rem;
                font-weight: 200;
                color: gray;

                &::before {
                    content: "";
                    position: absolute;
                    top: 2px;
                    left: -22px;
                    width: 1.2rem;
                    height: 1.2rem;
                    background: url('@/assets/ReadingView/ChapterEvaluate/爱心.png') no-repeat;
                    background-size: 1.2rem;
                }
            }
        }
    }
}</style>